@<template>
  <div class="class-box">
      <span style="padding-right:5px;font-weight:700;color:#5829ca;">{{name}}:</span>
      <!-- 1.v-for 父组件传递过来的数据
      2.这里条件是：数组长度 !=9  index!=classData.length-1
      3.动态添加样式 （默认选择第一个，点击后样式就添加给谁）
      -->
      <span :class="index==selectIndex ? 'selectStyle':''" v-for="(item,index) in classData" :key="index" @click="clickindex(index,item)" class="bg">{{item}} <i v-if="index!=classData.length-1">|</i></span>
  </div>
</template>

<script>
export default {
   name:'singerClass',
   props:{
       classData:{
           type:Array,
       },
       name:{
           type:String,
        }
   },
   data(){
       return{
           selectIndex:0,
       }
   },
   methods:{
       clickindex(index,item){
           this.selectIndex = index
           //获取点击的值 传递给父组件  $.emit() 创建自定义事件
        //    console.log(item)
           this.$emit('sonData',item)
       }
   }
}
</script>

<style scoped lang='less'>
     .class-box{
         cursor: pointer;
          font-family: 宋体;
          font-style: oblique;
          font-size: 18px;
         .selectStyle{
             color: #fff;
             background: #ee6a35;
         }
         i{
             color: black;
             padding: 0 8px;
             background: #fff;
         }
     }
</style>